<template>
  <div>
    <!-- banner -->
    <div id="demo" class="carousel slide" data-ride="carousel">
      <!-- <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>

        <li data-target="#demo" data-slide-to="1"></li>

        <li data-target="#demo" data-slide-to="2"></li>

        <li data-target="#demo" data-slide-to="3"></li>
      </ul>-->

      <div class="carousel-inner banner-top-ser clearfix">
        <div class="carousel-item active banner-img i1">
          <!-- banner上面悬停的所有信息 -->
          <div class="container" id="banner-top">
            <!-- 文字介绍 -->
            <h1>
              <span>境外购物天堂</span>
              <br />
              <span>花花万物，购遍全球</span>
            </h1>
            <button class="banner-top-btn">查看合集</button>
          </div>
        </div>

        <div class="carousel-item banner-img i2">
          <!-- <img src="../image/banner-2.jpg" /> -->
          <!-- banner上面悬停的所有信息 -->
          <div class="container" id="banner-top">
            <!-- 文字介绍 -->
            <h1>
              <span>境外购物天堂</span>
              <br />
              <span>花花万物，购遍全球</span>
            </h1>
            <button class="banner-top-btn">查看合集</button>
          </div>
        </div>

        <div class="carousel-item banner-img i3">
          <!-- <img src="../image/banner-3.jpg" /> -->
          <!-- banner上面悬停的所有信息 -->
          <div class="container" id="banner-top">
            <!-- 文字介绍 -->
            <h1>
              <span>境外购物天堂</span>
              <br />
              <span>花花万物，购遍全球</span>
            </h1>
            <button class="banner-top-btn">查看合集</button>
          </div>
        </div>
        <div class="carousel-item banner-img i4">
          <!-- <img src="../image/banner-4.jpg" /> -->
          <!-- banner上面悬停的所有信息 -->
          <div class="container" id="banner-top">
            <!-- 文字介绍 -->
            <h1>
              <span>境外购物天堂</span>
              <br />
              <span>花花万物，购遍全球</span>
            </h1>
            <button class="banner-top-btn">查看成都优质房源</button>
          </div>
        </div>
        <!-- 搜索栏 -->
        <div class="banner-top-fangyuan clearfix container">
          <div class="banner-left">
            <select class="form-control" id="fangyuan">
              <option>房源</option>
              <option>体验</option>
            </select>
          </div>
          <div class="form-group" id="inp-cent">
            <input
              type="email"
              class="form-control"
              id="exampleInputEmail1"
              style="height:70px;border-radius:0px;border:0px"
              placeholder="Email"
            />
          </div>
          <div id="data-start-end">
            <el-date-picker
              style="height:70px;border-radius:0px"
              v-model="value1"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']"
            ></el-date-picker>
          </div>
          <div class="banner-btn">
            <button
              type="button"
              class="btn btn-default btn-lg active"
              id="banner-btn-btn"
            >
              搜索
            </button>
          </div>
        </div>
      </div>

      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>

      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>

    <!-- 中间内容部分 -->

    <!-- 春季特惠房源，低至7折 -->
    <hot></hot>

    <!-- 春季出行灵感集 -->
    <spring></spring>

    <!-- 诚意推出airbnb的plus -->
    <classics></classics>

    <!-- 精彩旅行故事 -->
    <wonderful></wonderful>

    <!-- 高分体验 -->
    <highscore></highscore>

    <!-- 尾部 -->
    <footerone></footerone>

    <!-- 尾部结束 -->
  </div>
</template>

<script>
import Product from "../components/product.vue";
import four from "../components/four.vue";
import six from "../components/six.vue";
import hot from "../views/hot.vue";
import spring from "../views/spring.vue";
import wonderful from "../views/wonderful.vue";
import classics from "../views/classics.vue";
import highscore from "../views/highscore.vue";
import footerone from "../views/footerone.vue";
import hot_data from "../lib/hot.js";

export default {
  components: {
    Product,
    four,
    six,
    hot,
    spring,
    wonderful,
    classics,
    highscore,
    footerone
  },
  computed: {
    list() {
      return this.$store.state.productList;
      return this.$store.state.fourList;
      return this.$store.state.sixList;
    },
    brands() {
      return this.$store.getters.brands;
    },
    colors() {
      return this.$store.getters.colors;
    },
    filteredAndOrderedList() {
      let list = [...this.list];

      // 按颜色过滤
      if (this.filterColor !== "") {
        list = list.filter(item => item.color === this.filterColor);
      }

      return list;
    }
  },
  data() {
    return {
      filterBrand: "",
      filterColor: "",
      order: "",

      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: ""
    };
  },
  methods: {
    handleFilterColor(color) {
      if (this.filterColor === color) {
        this.filterColor = "";
      } else {
        this.filterColor = color;
      }
    }
  },
  mounted() {
    this.$store.dispatch("getProductList");
    this.$store.dispatch("getfourList");
    this.$store.dispatch("getsixList");
  }
};
</script>

<style>
/* banner上面悬停的总体框架 */
#banner-top {
  height: 340px;
  /* background-color: red; */
  position: relative;
  top: 160px;
  padding: 0px 24px;
}
#banner-top h1 {
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  line-height: 36px;
  margin: 0px 0px 24px 16px;
  padding: 12px 0px;
  font-family: PingFang SC;
}
.banner-top-btn {
  /* width: 108px; */
  height: 44px;
  padding: 10px 24px;
  border: 2px solid #fff;
  border-radius: 4px;
  background-color: transparent;
  font-size: 16px;
  color: #fff;
  margin-left: 16px;
}
.banner-top-ser {
  position: relative;
}
.banner-top-fangyuan {
  width: 80%;
  height: 70px;
  /* border: 1px solid #fff; */
  margin: 60px 0px 0px 16px;
  position: absolute;
  top: 340px;
  left: 12.5%;
}
#inp-cent {
  float: left;
  width: 45%;
}
.banner-left {
  float: left;
}
#fangyuan {
  background-color: #fff;
  width: 94px;
  height: 70px !important;
  /* display: inline-block; */
  color: #000;
  /* border: 1px solid #fff; */
  border-radius: 4px 0px 0px 4px;
}

#data-start-end {
  height: 70px;
  background-color: #fff;
  float: left;
}
.banner-btn {
  height: 70px;
  width: 9%;
  background-color: #fff;
  float: left;
}
#banner-btn-btn {
  /* width: 32px; */
  height: 46px;
  padding: 1px 18px;
  margin: 12px;
  background-color: #ff5a5f;
  color: #fff;
  border: 0px;
}
/* #date-staer {
  width: 180px !important;
  height: 70px !important;
} */
/* banner图片，使用背景图插入进去 */
.i1 div,
.i2 div,
.i3 div,
.i4 div {
  /* color: #fff; */
  /* position: absolute; */
}
.i1 {
  background: url(../image/banner-1.jpg);
  background-size: 100%;
  position: relative;
}
.i2 {
  background: url(../image/banner-2.jpg);
  background-size: 100%;
  position: relative;
}
.i3 {
  background: url(../image/banner-3.jpg);
  background-size: 100%;
  position: relative;
}
.i4 {
  background: url(../image/banner-4.jpg);
  background-size: 100%;
  position: relative;
}

.banner-img {
  width: 100%;
  height: 535px;
}

.zhongjian {
  border: 1px solid red;
}
</style>
